<template>
	<div>
		<h2>User: {{ $route.params.id }}</h2>
	</div>
</template>

<script setup>
	import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'

	/*
    动态路由获取参数
      1. 当动态路由之间进行跳转时不能获取当params参数
        解决:使用onBeforeRouteUpdate((to, from))钩子函数 中的to, from对象获取

      2. 使用onBeforeRouteUpdate() 钩子函数时,只有动态路由发生变化时才能跳转, 因此在第一次进入组件时不会触发
        解决: 使用useRoute() hooks函数直接获取
  */
	const route = useRoute()
	console.log(route.params.id)

	onBeforeRouteUpdate((to, from) => {
		console.log('from', from.params.id)
		console.log(to.params.id)
	})
</script>

<style scoped></style>
